
<template>
  <div>
    <!--topButtons-->
    <el-row class="operate-button">
      <template v-for="btn in customDataGrid.topButtons">
        <el-button
          v-if="btn.isShow ? btn.isShow() : true"
          :key="btn.name"
          :disabled="!!btn.isDisabled"
          :icon="btn.icon"
          :size="btn.size"
          :plain="btn.plain ? btn.plain : false"
          :round="btn.round ? btn.round : false"
          :type="btn.type ? btn.type : 'primary'"
          @click="btn.click"
        >
          {{ btn.name }}
          <i v-if="btn.rightIcon" :class="['el-icon--right', btn.rightIcon]" />
        </el-button>
      </template>
    </el-row>

    <el-table
      :stripe="dataGrid.table.stripe"
      :header-cell-style="{background:'#F5F7FA'}"
      :border="dataGrid.table.border"
      :data="customDataGrid.list"
      :show-header="dataGrid.table.showHeader"
      :max-height="650"
    >
      <!--列表索引-->
      <el-table-column
        v-if="dataGrid.table.showIndex"
        label="序号"
        align="center"
        type="index"
        width="60"
      >
        <!-- :index="indexMethod" -->
      </el-table-column>
      <!--数据列表-->
      <el-table-column
        v-for="(col,index) in dataGrid.columns"
        :key="index"
        :align="col.align"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <slot
            v-if="col.slotName"
            :col="col"
            :name="col.slotName"
            :row="scope.row"
            :index="scope.$index"
          />
          <span v-else>{{ scope.row[col.prop] }}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="dataGrid.table.showOperation"
        :width="dataGrid.table.operationWidth"
        :align="dataGrid.table.operationAlign"
        label="操作"
        :class="operate-text"
      >
        <template slot-scope="scope">
          <template v-for="btn in customDataGrid.rowButtons">

            <el-button
              v-if="btn.isShow ? btn.isShow(scope.row) : true"
              :key="btn.name"
              :disabled="btn.isDisabled ? btn.isDisabled(scope.row) : false"
              :icon="btn.icon"
              :type="btn.type ? btn.type : 'text'"
              :title="btn.showTitle ? btn.showTitle(scope.row) : null"
              @click="btn.click(scope.row, scope.$index)"
            >
              <span v-if="!btn.onlyIcon">{{ btn.name }}</span>
            </el-button>

          </template>
        </template>
      </el-table-column>

    </el-table>

    <!--      分页-->
    <el-pagination
      v-show="dataGrid.table.showPagination"
      background
      :layout="dataGrid.layout"
      :total="dataGrid.page.total"
      :page-count="dataGrid.page.pageCount"
      :pager-count="dataGrid.page.pagerCount"
      :page-size="dataGrid.page.pageSize"
      :current-page="dataGrid.page.currentPage"
      :page-sizes="dataGrid.page.pageSizes"
      :prev-text="dataGrid.page.prevText"
      :next-text="dataGrid.page.nextText"
      class="pagination-right"
      @current-change="pageChange"
      @size-change="sizeChange"
    />
  </div>
</template>

<script>

export default {
  name: 'SummerDataGrid',
  components: {},
  props: {
    customDataGrid: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dataGrid: {
        table: {
          customTableClass: '',
          showIndex: true,
          showPagination: true,
          showSingleSelection: false,
          showMultipleSelection: false,
          showOperation: true,
          showColumnSetting: true,
          operationAlign: 'center',
          tableWidth: '100%',
          align: 'left',
          selectionWidth: 35,
          indexWidth: 50,
          operationWidth: 200,
          columns: [],
          selectable: function() {
            return true
          }
        },
        page: {
          prevText: '上一页',
          nextText: '下一页',
          pagerCount: 10,
          layout: 'sizes, prev, pager, next',
          pageSizes: [10, 20, 50, 100, 200]
        }
      }
    }
  },
  computed: {

  },
  created() {
    Object.assign(this.dataGrid, this.customDataGrid)
    this.dataGrid.page.pageCount = Math.ceil(this.dataGrid.list.table / this.dataGrid.page.pageSize)
  },
  methods: {
    indexMethod(index) {
      return (this.customDataGrid.page.currentPage - 1) * this.customDataGrid.page.pageSize + index + 1
    },
    getDataGridStyle() {
      return {
        marginTop: this.dataGrid.table.marginTop + 'px'
      }
    },
    pageChange: function(currentPage) {
      this.customDataGrid.page.currentPage = currentPage
      this.$emit('page-change', this.customDataGrid.page)
    },
    sizeChange: function(pageSize) {
      this.customDataGrid.page.currentPage = 1
      this.customDataGrid.page.pageSize = pageSize
      this.$emit('page-change', this.customDataGrid.page)
    }
  }
}
</script>

<style lang="scss" scoped>

.pagination-right {
  text-align: right;
  padding: 20px;
  background: white;
}
.operation_menu :hover {
  color: #409EFF;
}

.el-button span{margin-left: -4px;}

// 滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 0px; // 横向滚动条
  height: 0px; // 纵向滚动条 必写
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

</style>
